<script setup lang="ts">
import type { UniFilePickerImageStyles, UniFilePickerListStyles, UniFilePickerOnSelectEvent, UniFormsLabelPosition, UniFormsRules } from '@uni-helper/uni-ui-types'
import type { FormItem, FormOnSubmitEvent } from '@/common/types/form'

const props = defineProps<{
  /** 表单数据 */
  fields: FormItem[]
  /** 表单规则 */
  rules: UniFormsRules
  /** label 位置 */
  labelPosition?: UniFormsLabelPosition
  /** label宽度 */
  labelWidth?: string
}>()

const emit = defineEmits<{
  /** isVerify 是否验证通过  value 表单值 */
  onSubmit: [event: FormOnSubmitEvent]
}>()

/** 表单实例 */
const form = ref()

/** 表单数据 */
const formData = ref<Record<string, any>>({})

/** 将传递的数据转换为表单数据 */
const dataToFormData = () => {
  // 给数据对象添加属性
  props.fields.forEach((item) => {
    formData.value[item.name] = item.defaultValue
  })
}

dataToFormData()

/** file picker image 样式 */
const imageStyles: UniFilePickerImageStyles = {
  width: '100%',
  height: 200,
}

/** file pikcer 列表样式 */
const listStyles: UniFilePickerListStyles = {
  border: true,
  dividline: true,
  borderStyle: {
    width: '1',
    color: '',
    style: 'dashed',
  },
}

const { uploadFile } = useUploadFile()

/** 选择图片 */
const onSelectImage = async (e: UniFilePickerOnSelectEvent, name: string) => {
  formData.value[name] = await uploadFile(e.tempFilePaths[0])
}

/** 提交事件 */
const onSubmit = () => {
  form.value.validate((err: any) => {
    if (err) {
      showSimpleToast(FORM_VERIFY_FAIL)
      return emit('onSubmit', { isVerify: false })
    }
    showSimpleToast(FORM_VERIFY_SUCCESS)
    emit('onSubmit', { isVerify: true, value: formData.value })
  })
}

defineExpose({
  onSubmit,
})
</script>

<template>
  <view class="form-container">
    <uni-forms
      ref="form" :model-value="formData" :rules="rules"
      :label-position="props.labelPosition ? props.labelPosition : 'left'"
      :label-width="props.labelWidth ? props.labelWidth : 65"
    >
      <template v-for="item in props.fields" :key="item.name">
        <uni-forms-item :label="item.labelName" :name="item.name" :required="item.required ? item.required : true">
          <!-- 输入框 -->
          <template v-if="item.itemType === 'input'">
            <uni-easyinput
              v-model="formData[item.name]" :placeholder="item.placeholder" :type="item.type"
              :maxlength="item.maxlength"
            />
          </template>

          <!-- 数据选择器 -->
          <template v-else-if="item.itemType === 'data-checkbox'">
            <uni-data-checkbox
              v-model="formData[item.name]" :selected-text-color="item.selectedTextColor"
              :selected-color="item.selectedColor" :localdata="item.localdata"
            />
          </template>

          <!-- 图片选择器 -->
          <template v-else-if="item.itemType === 'file-picker-image'">
            <uni-file-picker
              :del-icon="item.delIcon" :disable-preview="item.disablePreview" file-mediatype="image"
              :auto-upload="false" :limit="1" return-type="array" :image-styles="imageStyles" :list-styles="listStyles"
              @select="(e) => onSelectImage(e, item.name)"
            />
          </template>
          <!-- 日期选择器 -->
          <template v-else-if="item.itemType === 'date-time-picker'">
            <uni-datetime-picker
              v-model="formData[item.name]" :start="item.start" :return-type="item.returnType"
              :type="item.type ? item.type : 'date'" :end="item.end" :range-separator="item.rangeSeparator"
            />
          </template>

          <!-- 富文本 -->
          <template v-else-if="item.itemType === 'rich-text'">
            <hope-editor v-model:content="formData[item.name]" />
          </template>
        </uni-forms-item>
      </template>
    </uni-forms>
  </view>
</template>

<style scoped lang="scss">
.form {
  &-container {
    padding-inline: $padding-base;
    background-color: $color-white;
  }
}
</style>
